﻿<!DOCTYPE html>
<html>
<body style="text-align:center;">
    <canvas id="myCanvas" width="200" height="200">Your browser does not support the HTML5 canvas tag.</canvas>
    <script>
        ; (function () {
            var waveWidth = 300,
                offset = 0,
                waveHeight = 8,
                waveCount = 5,
                startX = -100,
                startY = 204,
                progress = 0,
                progressStep = 1,
                d2 = waveWidth / waveCount,
                d = d2 / 2,
                hd = d / 2;

            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            var img = new Image();
            ctx.fillStyle = "#4BF6EE";
        
            function tick() {
                offset -= 5;
                progress += progressStep;
                if (progress > 220 || progress < 0) progressStep *= -1;

                if (-1 * offset === d2) offset = 0;
                ctx.clearRect(0, 0, c.width, c.height);

                ctx.beginPath();
                var offsetY = startY - progress;
                ctx.moveTo(startX - offset, offsetY);

                for (var i = 0; i < waveCount; i++) {
                    var dx = i * d2;
                    var offsetX = dx + startX - offset;

                    ctx.quadraticCurveTo(offsetX + hd, offsetY + waveHeight, offsetX + d, offsetY);
                    ctx.quadraticCurveTo(offsetX + hd + d, offsetY - waveHeight, offsetX + d2, offsetY);
                }
              
            
                ctx.lineTo(startX + waveWidth, 300);
                ctx.lineTo(startX, 300);

            
                ctx.fill();
                //画布上已有的内容只会在它和新图形重叠的地方保留。新图形绘制于内容之后。
                ctx.globalCompositeOperation = "destination-atop";
                ctx.drawImage(img, 0, -1)
                requestAnimationFrame(tick);
            }

            img.onload = function () {
                tick();
            };

            img.src = "asset/alloy.png";
        })();

    </script>
    <a href="https://github.com/AlloyTeam/PhyTouch" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3; width: 140px; height: 140px;">
        <img src="//alloyteam.github.io/github.png" alt="">
    </a>
</body>
</html>
